<template>
  <!-- <router-link to='/recommentSong'> -->
    <div class="music_box" @click="jump(id)">
        <img :src="picUrl">
        <p class="music_text">{{name}}</p>
        <span class="listen-people listen-logo">{{setPlayCount(playCount)}}</span>
        <i class="remd_high" v-if="highQuality==true"></i>
    </div>
  <!-- </router-link> -->
</template>

<script>
export default {
  props:{
    picUrl:String,
    name:String,
    playCount:Number,
    highQuality:Boolean,
    id:Number
  },
  methods:{
    jump(id){
            console.log(id)
            this.$router.push({path:"/recommentSong",query:{id:id}})
        },
    setPlayCount(playCount){
      var sum;
      if(playCount<100000000){
        sum=((playCount/10000).toFixed(1))+"万";
        return sum ;
      }
      else{
        sum=((playCount/100000000).toFixed(1))+"亿";
        return sum;
      }
      
    }
  }
};
</script>
<style lang="scss" scoped>
.music_box {
  width: 32.7%;
  padding-right: 2px;
//   height: 124px;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
  img {
    width: 100%;
    height: 100%;
  }
  .music_text {
    padding: 6px 2px 0 8px;
    line-height: 1.2;
    height: 32px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .listen-people{
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 3;
    padding-left: 13px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    text-shadow: 1px 0 0 rgba(0,0,0,.15);  
  }
  .listen-logo{
      background-image: url();
  }
  .remd_high{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 20px;
    height: 20px;
    background: url() 0 no-repeat;
    background-size: contain;
  }

}
</style>
